<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI解梦小程序原型</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap');
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background: #f7f7f7;
        }
        .device-container {
            display: flex;
            gap: 20px;
            padding: 20px;
            overflow-x: auto;
            min-height: 100vh;
            align-items: flex-start;
        }
        .iphone15pro {
            width: 393px;
            height: 852px;
            overflow: hidden;
            position: relative;
            flex-shrink: 0;
            border-radius: 55px;
            background: #fff;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
        }
        .status-bar {
            height: 44px;
            background: #000;
            position: relative;
        }
        .dynamic-island {
            width: 126px;
            height: 37px;
            background: #000;
            border-radius: 24px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 12px;
        }
        .main-content {
            height: calc(852px - 44px);
            overflow-y: auto;
        }
        .nav-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: #fff;
            padding: 8px 0;
            border-top: 1px solid #eee;
        }
        .dream-bg {
            background-image: url('https://images.unsplash.com/photo-1536152470836-b943b246224c?w=800');
            background-size: cover;
            background-position: center;
        }
    </style>
</head>
<body>
    <div class="device-container">
        <!-- 首页 -->
        <div class="iphone15pro">
            <div class="status-bar">
                <div class="dynamic-island"></div>
            </div>
            <div class="main-content dream-bg">
                <div class="min-h-full bg-gradient-to-b from-black/60 to-black/30 px-4 pt-4 pb-20">
                    <div class="flex items-center justify-between mb-8">
                        <h1 class="text-3xl font-bold text-white">AI解梦</h1>
                        <div class="text-white text-sm">剩余次数：3</div>
                    </div>

                    <div class="bg-white/90 backdrop-blur-md rounded-3xl p-5 mt-4">
                        <textarea 
                            placeholder="请描述您的梦境内容..." 
                            class="w-full h-32 bg-transparent border-none resize-none text-gray-700 placeholder-gray-500 focus:ring-0"
                        ></textarea>
                        <div class="flex justify-center mt-4">
                            <button class="bg-blue-600 text-white px-12 py-3 rounded-full text-lg font-medium shadow-lg">
                                开始解梦
                            </button>
                        </div>
                    </div>

                    <div class="mt-6 grid grid-cols-2 gap-4">
                        <div class="bg-white/80 backdrop-blur rounded-2xl p-4">
                            <div class="text-lg font-medium mb-2">热门解梦</div>
                            <div class="text-sm text-gray-600">查看大家都在问什么</div>
                        </div>
                        <div class="bg-white/80 backdrop-blur rounded-2xl p-4">
                            <div class="text-lg font-medium mb-2">解梦历史</div>
                            <div class="text-sm text-gray-600">回顾您的梦境记录</div>
                        </div>
                    </div>
                </div>
                
                <nav class="nav-bar">
                    <div class="grid grid-cols-4 gap-2">
                        <a class="text-center text-blue-600">
                            <div class="text-2xl">🏠</div>
                            <div class="text-xs">首页</div>
                        </a>
                        <a class="text-center text-gray-500">
                            <div class="text-2xl">📜</div>
                            <div class="text-xs">历史</div>
                        </a>
                        <a class="text-center text-gray-500">
                            <div class="text-2xl">🔥</div>
                            <div class="text-xs">热门</div>
                        </a>
                        <a class="text-center text-gray-500">
                            <div class="text-2xl">👤</div>
                            <div class="text-xs">我的</div>
                        </a>
                    </div>
                </nav>
            </div>
        </div>

        <!-- 解梦结果页 -->
        <div class="iphone15pro">
            <div class="status-bar">
                <div class="dynamic-island"></div>
            </div>
            <div class="main-content bg-gray-50">
                <div class="px-4 py-6">
                    <div class="flex items-center mb-6">
                        <div class="text-gray-400">←</div>
                        <div class="text-xl font-bold ml-4">解梦结果</div>
                    </div>

                    <div class="bg-white rounded-2xl p-6 shadow-sm">
                        <div class="mb-6">
                            <h3 class="text-lg font-medium mb-3">梦境内容</h3>
                            <p class="text-gray-600">我梦见在一片星空下飞翔，感觉非常自由...</p>
                        </div>
                        
                        <div class="border-t pt-6">
                            <h3 class="text-lg font-medium mb-3">AI解析</h3>
                            <div class="space-y-4 text-gray-600">
                                <p>这个梦境象征着：</p>
                                <p>1. 内心渴望自由和突破</p>
                                <p>2. 正在经历人生的转折点</p>
                                <p>3. 对未来充满期待和想象</p>
                            </div>
                        </div>

                        <div class="flex gap-4 mt-8">
                            <button class="flex-1 bg-blue-600 text-white py-3 rounded-full">分享解梦</button>
                            <button class="flex-1 border border-blue-600 text-blue-600 py-3 rounded-full">收藏</button>
                        </div>
                    </div>

                    <div class="mt-6 bg-white rounded-2xl p-6">
                        <h3 class="text-lg font-medium mb-4">相关解梦</h3>
                        <div class="space-y-4">
                            <div class="flex items-center gap-4">
                                <img src="https://images.unsplash.com/photo-1534796636912-3b95b3ab5986?w=200" 
                                     class="w-20 h-20 rounded-lg object-cover"/>
                                <div>
                                    <div class="font-medium">梦见在天空飞翔</div>
                                    <div class="text-sm text-gray-500 mt-1">2.3万次解梦</div>
                                </div>
                            </div>
                            <div class="flex items-center gap-4">
                                <img src="https://images.unsplash.com/photo-1532767153582-b1a0e5145009?w=200" 
                                     class="w-20 h-20 rounded-lg object-cover"/>
                                <div>
                                    <div class="font-medium">梦见星空</div>
                                    <div class="text-sm text-gray-500 mt-1">1.8万次解梦</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <nav class="nav-bar">
                    <div class="grid grid-cols-4 gap-2">
                        <a class="text-center text-gray-500">
                            <div class="text-2xl">🏠</div>
                            <div class="text-xs">首页</div>
                        </a>
                        <a class="text-center text-gray-500">
                            <div class="text-2xl">📜</div>
                            <div class="text-xs">历史</div>
                        </a>
                        <a class="text-center text-gray-500">
                            <div class="text-2xl">🔥</div>
                            <div class="text-xs">热门</div>
                        </a>
                        <a class="text-center text-gray-500">
                            <div class="text-2xl">👤</div>
                            <div class="text-xs">我的</div>
                        </a>
                    </div>
                </nav>
            </div>
        </div>

        <!-- 历史记录页 -->
        <div class="iphone15pro">
            <div class="status-bar">
                <div class="dynamic-island"></div>
            </div>
            <div class="main-content bg-gray-50">
                <div class="px-4 py-6">
                    <h2 class="text-xl font-bold mb-6">解梦历史</h2>
                    
                    <div class="space-y-4">
                        <div class="bg-white rounded-2xl p-4">
                            <div class="flex justify-between items-start mb-3">
                                <h3 class="font-medium">飞翔梦</h3>
                                <span class="text-sm text-gray-500">03-15</span>
                            </div>
                            <p class="text-gray-600 text-sm line-clamp-2">我梦见在一片星空下飞翔，感觉非常自由...</p>
                            <div class="flex gap-2 mt-3">
                                <span class="text-xs px-2 py-1 bg-blue-50 text-blue-600 rounded-full">已解梦</span>
                                <span class="text-xs px-2 py-1 bg-yellow-50 text-yellow-600 rounded-full">已收藏</span>
                            </div>
                        </div>

                        <div class="bg-white rounded-2xl p-4">
                            <div class="flex justify-between items-start mb-3">
                                <h3 class="font-medium">考试梦</h3>
                                <span class="text-sm text-gray-500">03-14</span>
                            </div>
                            <p class="text-gray-600 text-sm line-clamp-2">梦见自己参加一场重要的考试...</p>
                            <div class="flex gap-2 mt-3">
                                <span class="text-xs px-2 py-1 bg-blue-50 text-blue-600 rounded-full">已解梦</span>
                            </div>
                        </div>

                        <div class="bg-white rounded-2xl p-4">
                            <div class="flex justify-between items-start mb-3">
                                <h3 class="font-medium">追逐梦</h3>
                                <span class="text-sm text-gray-500">03-13</span>
                            </div>
                            <p class="text-gray-600 text-sm line-clamp-2">梦见被什么东西追赶...</p>
                            <div class="flex gap-2 mt-3">
                                <span class="text-xs px-2 py-1 bg-blue-50 text-blue-600 rounded-full">已解梦</span>
                            </div>
                        </div>
                    </div>
                </div>

                <nav class="nav-bar">
                    <div class="grid grid-cols-4 gap-2">
                        <a class="text-center text-gray-500">
                            <div class="text-2xl">🏠</div>
                            <div class="text-xs">首页</div>
                        </a>
                        <a class="text-center text-blue-600">
                            <div class="text-2xl">📜</div>
                            <div class="text-xs">历史</div>
                        </a>
                        <a class="text-center text-gray-500">
                            <div class="text-2xl">🔥</div>
                            <div class="text-xs">热门</div>
                        </a>
                        <a class="text-center text-gray-500">
                            <div class="text-2xl">👤</div>
                            <div class="text-xs">我的</div>
                        </a>
                    </div>
                </nav>
            </div>
        </div>

        <!-- 个人中心页 -->
        <div class="iphone15pro">
            <div class="status-bar">
                <div class="dynamic-island"></div>
            </div>
            <div class="main-content bg-gray-50">
                <div class="bg-blue-600 pt-6 px-4 pb-20 rounded-b-[40px]">
                    <h2 class="text-xl font-bold text-white mb-6">个人中心</h2>
                    <div class="flex items-center">
                        <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100" 
                             class="w-16 h-16 rounded-full border-2 border-white"/>
                        <div class="ml-4 text-white">
                            <div class="font-medium text-lg">梦想家</div>
                            <div class="text-sm opacity-80">普通会员</div>
                        </div>
                    </div>
                </div>

                <div class="px-4 -mt-12">
                    <div class="bg-white rounded-2xl p-6 shadow-sm">
                        <div class="grid grid-cols-3 gap-4 text-center">
                            <div>
                                <div class="text-2xl font-medium text-blue-600">3</div>
                                <div class="text-sm text-gray-500 mt-1">剩余次数</div>
                            </div>
                            <div>
                                <div class="text-2xl font-medium text-blue-600">12</div>
                                <div class="text-sm text-gray-500 mt-1">已解梦</div>
                            </div>
                            <div>
                                <div class="text-2xl font-medium text-blue-600">5</div>
                                <div class="text-sm text-gray-500 mt-1">收藏</div>
                            </div>
                        </div>
                    </div>

                    <div class="mt-6 space-y-4">
                        <div class="bg-white rounded-2xl">
                            <a class="flex items-center justify-between p-4">
                                <div class="flex items-center">
                                    <span class="text-2xl mr-3">💎</span>
                                    <span>开通会员</span>
                                </div>
                                <span class="text-gray-400">></span>
                            </a>
                            <a class="flex items-center justify-between p-4 border-t">
                                <div class="flex items-center">
                                    <span class="text-2xl mr-3">🎁</span>
                                    <span>邀请好友</span>
                                </div>
                                <span class="text-gray-400">></span>
                            </a>
                        </div>

                        <div class="bg-white rounded-2xl">
                            <a class="flex items-center justify-between p-4">
                                <div class="flex items-center">
                                    <span class="text-2xl mr-3">⚙️</span>
                                    <span>设置</span>
                                </div>
                                <span class="text-gray-400">></span>
                            </a>
                            <a class="flex items-center justify-between p-4 border-t">
                                <div class="flex items-center">
                                    <span class="text-2xl mr-3">❓</span>
                                    <span>帮助与反馈</span>
                                </div>
                                <span class="text-gray-400">></span>
                            </a>
                        </div>
                    </div>
                </div>

                <nav class="nav-bar">
                    <div class="grid grid-cols-4 gap-2">
                        <a class="text-center text-gray-500">
                            <div class="text-2xl">🏠</div>
                            <div class="text-xs">首页</div>
                        </a>
                        <a class="text-center text-gray-500">
                            <div class="text-2xl">📜</div>
                            <div class="text-xs">历史</div>
                        </a>
                        <a class="text-center text-gray-500">
                            <div class="text-2xl">🔥</div>
                            <div class="text-xs">热门</div>
                        </a>
                        <a class="text-center text-blue-600">
                            <div class="text-2xl">👤</div>
                            <div class="text-xs">我的</div>
                        </a>
                    </div>
                </nav>
            </div>
        </div>
    </div>
</body>
</html>